<!DOCTYPE HTML>
<style type="text/css">
#displayChat {
	height: 150px;
	background: #FFF;
}

#displayChat li {
	margin: 10px 5px 5px 5px;
	font-size: 15px;
	word-wrap: break-word;
}

#displayChat li h4 {
	display: inline;
	font-size: 15px;
}

#displayNotes {
	height: 195px;
	background: #FFF;
}

#subscriberDiv {
	position: relative;
 	width: 100%;
	height: 480px;
	z-index: 10; 
}

#publisherDiv {
	position: absolute;
	width: 100px;
	height: 200px;
	z-index: 10;
	/*bottom: 10px;
	left: 10px;*/
}

#subscriberDiv object,#publisherDiv object {
	width: 100%;
	height: 100%;
}

/* textarea  { 
	display: block;
	width:100%;
	height:100%;   
	line-height:1;
	border:0;
	border-radius:2px;
	max-width:300px;
	max-height:250px;
} */

/* 
textarea  { 
	display: block;
	padding:25px 25px 40px;
	margin:0 auto 20px auto;
	width:100%;
	height:100%;   
	font:12px 'Gloria Hallelujah', cursive; 
	line-height:1;
	border:0;
	border-radius:2px;
	background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
	background: -moz-linear-gradient(#F9EFAF, #F7E98D);
	background: -o-linear-gradient(#F9EFAF, #F7E98D);
	background: -ms-linear-gradient(#F9EFAF, #F7E98D);
	background: linear-gradient(#F9EFAF, #F7E98D);
	box-shadow:0 4px 6px rgba(0,0,0,0.1);
	overflow:hidden;
	transition:box-shadow 0.5s ease;
	font-smoothing:subpixel-antialiased;
	max-width:300px;
	max-height:250px;
}

textarea:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); }
textarea:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; } */

</style>

<div id="page-outer">
	<div id="page-container" class="wrapper wrapper-home white">
		<div class="content-main">
			<div id="dropbox" class="dropbox" ng-class="dropClass" style="background-color: white;height: 30px">
				<span><font color="black">{{dropText}}</font></span>
			</div><br>
			<div ng-show="files.length">
		         <div ng-repeat="file in files.slice(0)">
		            <span>{{file.webkitRelativePath || file.name}}</span>
		            (<span ng-switch="file.size > 1024*1024">
		                <span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
		                <span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
		            </span>)
		        </div> 
	        </div>
			<button type="submit" class="signup-btn btn btn-small btn-primary pull-right" ng-click="uploadFile()">Upload</button>
			<div class="widget widget-nopad">

				<div class="content-header">
					<div class="header-inner">
						<h2 class="js-timeline-title">Video Call</h2>
						<button ng-click="stopSession()" class="signup-btn btn pull-right time"
						type="submit" style="margin-top: -23px;">Stop</button>
					</div>
					
					
						
				</div>
				<!-- /widget-header -->
				<div class="content">
					<div id="publisherDiv" style="margin-top: -45%;"></div>
					<div id="subscriberDiv" style="margin-top: 50%;"></div>
				</div>
				<!-- /widget-content -->
			</div>
				
		</div>
	
		<div class="dashboard">
			<div class="widget widget-nopad">

				<div class="content-header">
					<div class="header-inner">
						<h2 class="js-timeline-title">Chat</h2>
					</div>
				</div>
				<!-- /widget-header -->
				<div class="content">
				
					<div id="displayChat">
						<textarea style="margin: 0px; width: 292px; height: 150px;"></textarea>
					</div>
					<div class="home-tweet-box tweet-box component tweet-user">
						<form class="tweet-form condensed" method="post" ui-keypress="{13:'sendMessage()'}">
							<input type="text" placeholder="Chat here..." ng-model="newMsg">
						</form>
					</div>
					
				</div>
				<!-- /widget-content -->
			</div>
			
			<div class="widget widget-nopad">

				<div class="content-header">
					<div class="header-inner">
						<h2 class="js-timeline-title">Notes</h2>
					</div>
				</div>
				<!-- /widget-header -->
				<div class="content">
				
					<div id="displayNotes">
						<textarea style="margin: 0px; width: 292px; height: 188px;" ng-model="newNote" placeholder="Here you can take notes... "></textarea>
					</div>
					
					
				</div>
				<!-- /widget-content -->
			</div>
			<div class="widget widget-nopad">

				<div class="content-header">
					<div class="header-inner">
						<h2 class="js-timeline-title">Files</h2>
						
					</div>
				</div>
				<!-- /widget-header -->
				<div class="content">
					<div class="content-inner" id="filesUploaded">
						<ul ng-repeat="file in uploadedFiles" >
						    <li>
						    	<a class="list-link" href="{{file.url}}" ><font color="black">{{file.fileName}}</font></a>
						    </li>
						</ul>
					</div>															
					
				</div>
				<!-- /widget-content -->
			</div>
			<div class="widget widget-nopad">

				<div class="content-header">
					<div class="header-inner">
						<h2 class="js-timeline-title">Users in Session</h2>
						
					</div>
				</div>
				<!-- /widget-header -->
				<div class="content">
					<div class="content-inner" id="sessionUsers">
						<ul ng-repeat="user in userList" >
						    <li>
						    	<a class="list-link" href="user/{{user}}" ><font color="black">{{user}}</font></a>
						    </li>
						</ul>
					</div>															
					
				</div>
				<!-- /widget-content -->
			</div>
		</div>
	

	</div>
</div>
<div class="row"></div>
<footer>
	<p>&copy; Meet Expert 2013</p>
</footer>

